<template>
  <div class="result-analysis-container">
    <!-- 页面标题和操作区域 -->
    <div class="page-header">
      <h2>优化结果分析</h2>
      <div class="header-actions">
        <el-button type="primary" @click="refreshAllData" :loading="loading">
          <el-icon><Refresh /></el-icon>
          刷新数据
        </el-button>
      </div>
    </div>



    <!-- 概览数据 -->
    <div class="overview-section">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card>
            <template #header>
              <span>设备总数</span>
            </template>
            <div class="stat-item">
              <div class="stat-value">{{ formatNumber(overviewData.totalDevices) }}</div>
              <div class="stat-label">台设备</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <template #header>
              <span>信号采集数</span>
            </template>
            <div class="stat-item">
              <div class="stat-value">{{ formatNumber(overviewData.totalSignals) }}</div>
              <div class="stat-label">条记录</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <template #header>
              <span>优化任务数</span>
            </template>
            <div class="stat-item">
              <div class="stat-value">{{ formatNumber(overviewData.totalTasks) }}</div>
              <div class="stat-label">个任务</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <template #header>
              <span>优化成功率</span>
            </template>
            <div class="stat-item">
              <div class="stat-value">{{ formatPercent(overviewData.successRate) }}</div>
              <div class="stat-label">成功率</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 设备分析 -->
    <div class="analysis-section">
      <el-row :gutter="20">
        <!-- 设备类型分布 -->
        <el-col :span="12">
          <el-card>
            <template #header>
              <span>设备类型分布</span>
            </template>
            <div v-if="deviceTypeDistribution.length > 0" class="chart-container">
              <div v-for="item in deviceTypeDistribution" :key="item.type" class="distribution-item">
                <div class="distribution-label">{{ item.type }}</div>
                <div class="distribution-bar">
                  <div 
                    class="distribution-fill" 
                    :style="{ width: item.percentage + '%' }"
                    :class="getDistributionColor(item.type)"
                  ></div>
                </div>
                <div class="distribution-value">{{ item.count }} ({{ item.percentage }}%)</div>
              </div>
            </div>
            <div v-else class="empty-data">暂无数据</div>
          </el-card>
        </el-col>

        <!-- 设备状态统计 -->
        <el-col :span="12">
          <el-card>
            <template #header>
              <span>设备状态统计</span>
            </template>
            <div v-if="deviceStatusStats.total" class="status-stats">
              <div class="status-item">
                <span class="status-label">正常设备:</span>
                <span class="status-value">{{ deviceStatusStats.normal || 0 }}</span>
                <el-progress 
                  :percentage="Number((deviceStatusStats.normal / deviceStatusStats.total * 100).toFixed(1))"
                  :status="'success'"
                  style="width: 200px; margin-left: 10px;"
                />
              </div>
              <div class="status-item">
                <span class="status-label">故障设备:</span>
                <span class="status-value">{{ deviceStatusStats.fault || 0 }}</span>
                <el-progress 
                  :percentage="Number((deviceStatusStats.fault / deviceStatusStats.total * 100).toFixed(1))"
                  :status="'exception'"
                  style="width: 200px; margin-left: 10px;"
                />
              </div>
            </div>
            <div v-else class="empty-data">暂无数据</div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 信号质量分析 -->
    <div class="analysis-section">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card>
            <template #header>
              <span>信号质量分析</span>
            </template>
            <div v-if="signalQualityData.averageStrength" class="signal-stats">
              <div class="signal-item">
                <span>平均信号强度:</span>
                <span :class="getSignalStrengthLevel(signalQualityData.averageStrength).type">
                  {{ signalQualityData.averageStrength }} dBm
                </span>
              </div>
              <div class="signal-item">
                <span>平均延迟:</span>
                <span>{{ signalQualityData.averageLatency }} ms</span>
              </div>
              <div class="signal-item">
                <span>平均丢包率:</span>
                <span :class="getPacketLossType(signalQualityData.averagePacketLoss).type">
                  {{ signalQualityData.averagePacketLoss }}%
                </span>
              </div>
            </div>
            <div v-else class="empty-data">暂无数据</div>
          </el-card>
        </el-col>

        <!-- 任务执行统计 -->
        <el-col :span="12">
          <el-card>
            <template #header>
              <span>任务执行统计</span>
            </template>
            <div v-if="taskExecutionStats.total" class="task-stats">
              <div class="task-item">
                <span>待执行:</span>
                <span>{{ taskExecutionStats.pending || 0 }}</span>
              </div>
              <div class="task-item">
                <span>执行中:</span>
                <span>{{ taskExecutionStats.running || 0 }}</span>
              </div>
              <div class="task-item">
                <span>已完成:</span>
                <span>{{ taskExecutionStats.completed || 0 }}</span>
              </div>
              <div class="task-item">
                <span>失败:</span>
                <span>{{ taskExecutionStats.failed || 0 }}</span>
              </div>
            </div>
            <div v-else class="empty-data">暂无数据</div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 优化效果分析 -->
    <div class="analysis-section">
      <el-card>
        <template #header>
          <span>优化效果分析</span>
        </template>
        <div v-if="optimizationEffectData.averageImprovement" class="optimization-stats">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="optimization-item">
                <div class="optimization-label">平均改善率</div>
                <div class="optimization-value" :class="getOptimizationEffectLevel(optimizationEffectData.averageImprovement).type">
                  {{ optimizationEffectData.averageImprovement }}%
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="optimization-item">
                <div class="optimization-label">成功任务数</div>
                <div class="optimization-value">{{ optimizationEffectData.successCount || 0 }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="optimization-item">
                <div class="optimization-label">失败任务数</div>
                <div class="optimization-value">{{ optimizationEffectData.failedCount || 0 }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div v-else class="empty-data">暂无数据</div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { Refresh } from '@element-plus/icons-vue'
import { useStructureAnalysis } from '../hooks/useStructureAnalysis.js'

const {
  loading,
  overviewData,
  deviceTypeDistribution,
  deviceStatusStats,
  signalQualityData,
  taskExecutionStats,
  optimizationEffectData,
  refreshAllData,
  formatPercent,
  formatNumber,
  getSignalStrengthLevel,
  getOptimizationEffectLevel
} = useStructureAnalysis()

// 获取分布颜色
const getDistributionColor = (type) => {
  const colors = {
    '基站': 'color-primary',
    '路由器': 'color-success', 
    '交换机': 'color-warning',
    '中继器': 'color-info',
    '网关': 'color-danger'
  }
  return colors[type] || 'color-default'
}

// 获取丢包率类型
const getPacketLossType = (loss) => {
  if (loss <= 1) return { type: 'success' }
  if (loss <= 3) return { type: 'warning' }
  return { type: 'danger' }
}
</script>

<style scoped>
.result-analysis-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #303133;
}

.search-section {
  margin-bottom: 20px;
}

.form-actions {
  text-align: right;
  padding-top: 10px;
}

.overview-section {
  margin-bottom: 20px;
}

.analysis-section {
  margin-bottom: 20px;
}

.stat-item {
  text-align: center;
  padding: 10px 0;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

.chart-container {
  padding: 10px 0;
}

.distribution-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.distribution-label {
  width: 80px;
  font-size: 14px;
}

.distribution-bar {
  flex: 1;
  height: 20px;
  background-color: #f5f7fa;
  border-radius: 10px;
  margin: 0 10px;
  overflow: hidden;
}

.distribution-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 0.3s ease;
}

.distribution-value {
  width: 100px;
  text-align: right;
  font-size: 14px;
  color: #606266;
}

/* 分布颜色 */
.color-primary { background-color: #409eff; }
.color-success { background-color: #67c23a; }
.color-warning { background-color: #e6a23c; }
.color-info { background-color: #909399; }
.color-danger { background-color: #f56c6c; }
.color-default { background-color: #909399; }

.status-stats,
.signal-stats,
.task-stats,
.optimization-stats {
  padding: 10px 0;
}

.status-item,
.signal-item,
.task-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.status-label,
.signal-item span:first-child,
.task-item span:first-child {
  width: 100px;
  font-size: 14px;
  color: #606266;
}

.status-value,
.signal-item span:last-child,
.task-item span:last-child {
  font-size: 14px;
  font-weight: 500;
}

.optimization-item {
  text-align: center;
  padding: 15px 0;
}

.optimization-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 10px;
}

.optimization-value {
  font-size: 24px;
  font-weight: bold;
}

.empty-data {
  text-align: center;
  padding: 40px 0;
  color: #909399;
  font-size: 14px;
}

/* 状态颜色 */
.success { color: #67c23a; }
.warning { color: #e6a23c; }
.danger { color: #f56c6c; }
.info { color: #909399; }
</style>